<template>
  <div class="login-container" style="overflow: hidden;">
    <div class="music-wensheng"/>
    <div class="login-box">
      <div class="close-btn" @click="closeLogin">×</div>
      <!-- 登录标题 -->
      <div class="login-header">
        <h2>{{ loginType === 'phone' ? '登录/注册' : '账号密码登录' }}</h2>
        
      </div>
      <div v-if="loginType === 'password'" class="password-hint">请先在APP中设置密码登录</div>

      <!-- 手机号验证码登录 -->
      <div v-if="loginType === 'phone'" class="login-form">
        <div class="form-item">
          <el-input
            v-model="phoneForm.phone"
            placeholder="请输入手机号"
            prefix-icon="Phone"
            maxlength="11"
            @input="validatePhone"
            class="aa"
          >
        </el-input>
          <div v-if="phoneError" class="error-msg">{{ phoneError }}</div>
        </div>
        
        <div class="form-item">
          <div class="code-input-wrapper">
            <el-input
              v-model="phoneForm.code"
              placeholder="请输入验证码"
              prefix-icon="Message"
              maxlength="6"
            />
            <el-button 
              class="code-btn"
              :disabled="!canSendCode || countdown > 0"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
            </el-button>
          </div>
        </div>

        <el-button 
          class="login-btn" 
          type="primary" 
          :loading="loading"
          :disabled="!phoneForm.phone || !phoneForm.code"
          @click="handlePhoneLogin"
        >
          登录/注册
        </el-button>
        
        <!-- 登录方式切换 -->
        <div class="login-switch">
          <span 
            v-if="loginType === 'phone'"
            @click="loginType = 'password'"
          >
            使用账号登录
          </span>
          <span 
            v-if="loginType === 'password'"
            @click="loginType = 'phone'"
          >
            使用手机号登录
          </span>
        </div>
      </div>

      <!-- 账号密码登录 -->
      <div v-if="loginType === 'password'" class="login-form">
        <div class="form-item">
          <el-input
            v-model="passwordForm.username"
            placeholder="请输入账号"
            prefix-icon="User"
          />
        </div>
        
        <div class="form-item">
          <el-input
            v-model="passwordForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            @keyup.enter="handlePasswordLogin"
          />
        </div>

        <el-button 
          class="login-btn" 
          type="primary" 
          :loading="loading"
          :disabled="!passwordForm.username || !passwordForm.password"
          @click="handlePasswordLogin"
        >
          立即登录
        </el-button>
        
        <!-- 登录方式切换 -->
        <div class="login-switch">
          <span 
            v-if="loginType === 'phone'"
            @click="loginType = 'password'"
          >
            使用账号登录
          </span>
          <span 
            v-if="loginType === 'password'"
            @click="loginType = 'phone'"
          >
            使用手机号登录
          </span>
        </div>
      </div>

      <!-- 第三方登录 -->
      <div class="third-party-login">
        <div class="social-login">
          <div class="social-item" @click="handleWechatLogin">
            <div class="social-icon wechat">
              <svg width="24" height="24" viewBox="0 0 32 32" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.528 18.157c-.517 0-1.039-.519-1.039-1.049 0-.522.522-1.048 1.04-1.048.783 0 1.308.526 1.308 1.048 0 .53-.525 1.05-1.309 1.05m-5.751 0c-.521 0-1.046-.52-1.046-1.05 0-.522.525-1.048 1.046-1.048.791 0 1.309.526 1.309 1.048 0 .53-.518 1.05-1.31 1.05m11.765 1.31c0-4.19-4.183-7.606-8.88-7.606-4.976 0-8.894 3.416-8.894 7.607 0 4.198 3.918 7.607 8.893 7.607 1.041 0 2.091-.264 3.137-.527l2.869 1.575-.787-2.62c2.098-1.578 3.662-3.671 3.662-6.035" fill="#4EC244"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.06 11.077c-.785 0-1.575-.527-1.575-1.312 0-.789.79-1.308 1.574-1.308s1.305.52 1.305 1.308c0 .785-.521 1.312-1.305 1.312m7.318-2.62c.787 0 1.309.52 1.309 1.308 0 .785-.522 1.312-1.31 1.312-.783 0-1.57-.527-1.57-1.312 0-.789.787-1.308 1.57-1.308M21 11.299c.338 0 .674.024 1.006.062C21.101 7.138 16.597 4 11.455 4 5.709 4 1 7.927 1 12.915c0 2.878 1.567 5.242 4.184 7.076l-1.046 3.153 3.655-1.837c1.308.259 2.358.526 3.663.526.328 0 .654-.016.976-.042a7.831 7.831 0 01-.322-2.196c0-4.58 3.922-8.296 8.889-8.296" fill="#4EC244"/></svg>
            </div>
            <span>微信登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

// 定义事件发射
const emit = defineEmits(['close'])

// 使用 user store
const userStore = useUserStore()

// 禁用滚动条
onMounted(() => {
  document.body.style.overflow = 'hidden'
})

// 恢复滚动条
onBeforeUnmount(() => {
  document.body.style.overflow = ''
})

// 登录类型
const loginType = ref('phone')

// 加载状态
const loading = ref(false)

// 手机号登录表单
const phoneForm = reactive({
  phone: '',
  code: ''
})

// 密码登录表单
const passwordForm = reactive({
  username: '',
  password: ''
})

// 记住密码

// 手机号验证错误
const phoneError = ref('')

// 验证码倒计时
const countdown = ref(0)

// 验证手机号格式
const validatePhone = () => {
  const phoneReg = /^1[3-9]\d{9}$/
  if (phoneForm.phone && !phoneReg.test(phoneForm.phone)) {
    phoneError.value = '请输入正确的手机号'
  } else {
    phoneError.value = ''
  }
}

// 是否可以发送验证码
const canSendCode = computed(() => {
  const phoneReg = /^1[3-9]\d{9}$/
  return phoneReg.test(phoneForm.phone)
})

// 发送验证码
const sendCode = async () => {
  if (!canSendCode.value) {
    ElMessage.error('请输入正确的手机号')
    return
  }

  try {
    // 这里调用发送验证码的API
    // await sendSmsCode(phoneForm.phone)
    
    ElMessage.success('验证码已发送')
    
    // 开始倒计时
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    ElMessage.error('验证码发送失败')
  }
}

// 手机号验证码登录
const handlePhoneLogin = async () => {
  if (!phoneForm.phone || !phoneForm.code) {
    ElMessage.error('请填写完整信息')
    return
  }

  loading.value = true
  try {
    // 测试账号验证码登录（测试验证码：123456）
    if (phoneForm.phone === '18445120598' && phoneForm.code === '123456') {
      userStore.login({
        phone: phoneForm.phone,
        token: 'mock-token',
        avatar: 'https://picsum.photos/99/99?random=',
        nickname: '折纸'
      })
      ElMessage.success('登录成功')
      closeLogin()
      return
    }
    
    // 这里调用手机号登录API
    // const result = await phoneLogin(phoneForm.phone, phoneForm.code)
    
    userStore.login({
      phone: phoneForm.phone,
      token: 'mock-token'
    })
    ElMessage.success('登录成功')
    closeLogin()
  } catch (error) {
    ElMessage.error('登录失败，请检查验证码')
  } finally {
    loading.value = false
  }
}

// 账号密码登录
const handlePasswordLogin = async () => {
  if (!passwordForm.username || !passwordForm.password) {
    ElMessage.error('请填写完整信息')
    return
  }

  loading.value = true
  try {
    // 测试账号验证
    if (passwordForm.username === '18445120598' && passwordForm.password === '123456') {
      userStore.login({
        username: passwordForm.username,
        token: 'mock-token',
        avatar: 'https://picsum.photos/99/99?random=',
        nickname: '折纸'
      })
      ElMessage.success('登录成功')
      closeLogin()
      return
    }
    
    // 这里调用密码登录API
    // const result = await passwordLogin(passwordForm.username, passwordForm.password)
    
    userStore.login({
      username: passwordForm.username,
      token: 'mock-token'
    })
    ElMessage.success('登录成功')
    closeLogin()
  } catch (error) {
    ElMessage.error('登录失败，请检查账号密码')
  } finally {
    loading.value = false
  }
}

// 微信登录
const handleWechatLogin = () => {
  // 这里实现微信登录逻辑
  // 可以打开微信登录二维码弹窗或跳转到微信授权页面
  ElMessage.info('微信登录功能开发中...')
}

// 忘记密码
const forgotPassword = () => {
  ElMessage.info('请联系客服重置密码')
}

// 去注册
const goToRegister = () => {
  // 这里实现跳转到注册页面的逻辑
  ElMessage.info('注册功能开发中...')
}

// 关闭登录弹窗
const closeLogin = () => {
  emit('close')
}

// 暴露给父组件的方法
defineExpose({
  closeLogin
})
</script>

<style scoped>
.el-input {
  --el-input-focus-border-color: #ff6600; /* 自定义颜色 */
}
.el-input {
  --el-input-bg-color: #1E1E1E !important;
  height: 44px !important;
}
.login-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
  height: 750px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.music-wensheng {
  width: 200px;
  height: 500px;
  background: red;
}

.login-box {
  background: white;
  padding: 32px;
  width: 400px;
  height: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  background: #1E1E1E;
}

.login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 24px;
}

.login-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  color: white;
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1E1E1E;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  color: #666;
  transition: all 0.3s;
  margin-left: auto;
}

.close-btn:hover {
  color: #ffffff;
  background: #1E1E1E;
}

.login-switch {
  text-align: left;
  margin-top: 12px;
  font-size: 14px;
}

.login-switch span {
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.login-switch span:hover {
  color: white;
}

.login-form {
  margin-bottom: 24px;
}

.form-item {
  margin-bottom: 20px;
}

.error-msg {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
}

.code-input-wrapper {
  display: flex;
  gap: 12px;
}

.code-input-wrapper .el-input {
  flex: 1;
}

.code-btn {
  width: 120px;
  height: 44px;
  font-size: 14px;
  background-color: #1E1E1E !important;
}





.login-btn {
  background-color: rgb(200, 0, 0);
  width: 100%;
  height: 44px;
  font-size: 16px;
  color: #ffffff;
  border: none;
}

.login-btn:hover {
  background-color: #ff0000;
}

.third-party-login {
  margin-top: 32px;
}



.social-login {
  display: flex;
  justify-content: center;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s;
}

.social-item:hover {
  background: #f8f9fa;
}

.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.social-icon.wechat {
  background: #000000;
}

.social-item span {
  font-size: 14px;
  color: #666;
}

.register-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #666;
}

.register-link span {
  color: #409eff;
  cursor: pointer;
}

.register-link span:hover {
  text-decoration: underline;
}

.password-hint {
  font-size: 12px;
  color: #999;
  margin: 12px 0;
}


</style>